<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>列表页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
</head>
<body style="padding: 10px 0 0 10px;">
	<div class="layui-row layui-col-space5">
		<!-- 左边面板【start】 -->
		<div class="layui-col-md12" id="id_panel_left_grid">
			<div class="layui-panel" style="overflow: auto; padding-top: 0.2rem;">
				<div class="mid-content">
					
					
					<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
					 
	<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		[(${dto.toolbar.buttonHtml})]
	</div>
	</script>
					 
	<script type="text/html" id="cityTpl">
	<select id="demoCity1" class="layui-border" lay-ignore>
		<option value="浙江杭州">浙江杭州</option>
		<option value="江西南昌">江西南昌</option>
		<option value="湖北武汉">湖北武汉</option>
	</select>
	</script>
	<script type="text/html" id="switchTpl">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="sex2" value="{{ d.sex == '男' ? 0 : 1}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
	</script>
	<script type="text/html" id="checkboxTpl">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
	</script>
	<script type="text/html" id="usernameTpl">
	<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
	</script>
					 
	<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/javascript">
	var MAP_DICT_MenuState = {"0":"禁用","1":"启用"};
	</script>
	<!-- 加载TPL语法模板 -->
	<script type="text/html" th:each="templet : ${dto.templetArr}" th:id="${templet.id}">
	[(${templet.code})]
	</script>
					
					<script th:inline="javascript">
					var colGrids = $.parseJSON(JSON.stringify([(${dto.colGrids})]));
					layui
						//.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
						.use(['form', 'element', 'table', 'dropdown',/* 'optimizeSelectOption',*/ 'util'], function(){
						var element = layui.element;
						var table = layui.table;
						var dropdown = layui.dropdown;
						var form = layui.form;
						var util = layui.util;
						var $ = layui.jquery;
						
						var fn1 = function (field) {
					        return function (data) {
					            var value = 0;
					            return [
					                '<select name="type" lay-filter="type" lay-search="true" value="' + value + '">',
					                '<option value="0"' + (value === 0 ? 'selected' : '') + '>国产</option>',
					                '<option value="1"' + (value === 1 ? 'selected' : '') + '>进口</option>',
					                '</select>'
					            ].join('');
					        };
					    };
						
						/*
						layer.msg('本示例演示的数据为静态模拟数据，<br>实际使用时换成您的真实接口即可。', {
							closeBtn: 1,
							icon: 6,
							time: 21*1000,
							offset: '21px'
						});
						*/
						
						// 创建渲染实例
						table.render({
							elem: '#main_table'
							,url:'[(${dto.menu.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
							,toolbar: '#toolbarDemo'
							,defaultToolbar: ['filter', 'exports', 'print', {
									title: '刷新页面'
									,layEvent: 'LAYTABLE_REFRESH'
									,icon: 'layui-icon-refresh'
								}, {
								title: '查询条件'
									,layEvent: 'LAYTABLE_SEARCH'
									,icon: 'layui-icon-search'
								}]
							,height: window.innerHeight - 40 // 最大高度减去其他容器已占有的高度差
							,limit : 20
							,limits : [20,50,500,9999]
							,cellMinWidth: 95
							,totalRow: true // 开启合计行
							,page: true
							,request: {
								pageName: 'page',
								limitName: 'size'
							}
							,skin: 'row'
							,even: true // 开启隔行背景
							,cols: [ 
								colGrids
							 ]
							,done: function(){
								var id = this.id;
					            
								// 文本框编辑事件
								$('input[lay-filter="_input_filter_text_on_table"]').on('change',function (e) {
									var value = $(this).val();
								    var tdElem = $(this).closest('td');
								    var trElem = tdElem.closest('tr');
								    var tableView = trElem.closest('.layui-table-view');
								    table.cache['main_table'][trElem.data('index')][tdElem.data('field')] = value;
									
									var dataCommit = {};
									dataCommit['guid'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['guid'];
									dataCommit[tdElem.data('field')] = value;
									doEditOnTable(dataCommit);
									return;
								});
								
								// 绑定选择框(转换)的值变化提交事件
								form.on('switch(_input_filter_checkbox_on_table)', function(data){
									//layer.tips(this.value + ' ' + this.name + '：'+ data.elem.checked, data.othis);
								    var value = this.checked ? 1 : 0;
								    modifyTableCacheBySwitch(data, value);
								});
								
								// 绑定选择框(下拉)的值变化提交事件
								form.on('select(_input_filter_selector_on_table)', function (data) {
								    console.log("data->>>>>>>>>>>>>>>>", data);
								    var selectElem = $(data.elem);
								    var tdElem = selectElem.closest('td');
								    var trElem = tdElem.closest('tr');
								    var tableView = trElem.closest('.layui-table-view');
								    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
									
								    var dataCommit = {};
									dataCommit['guid'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['guid'];
									dataCommit[tdElem.data('field')] = data.value;
									doEditOnTable(dataCommit);
								});
								 
								// 重载测试
								dropdown.render({
									elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
									,data: [{
										id: 'reload',
										title: '重载'
									},{
										id: 'reload-deep',
										title: '重载 - 参数叠加'
									},{
										id: 'reloadData',
										title: '仅重载数据'
									},{
										id: 'reloadData-deep',
										title: '仅重载数据 - 参数叠加'
									}]
									// 菜单被点击的事件
									,click: function(obj){
										switch(obj.id){
											case 'reload':
												// 重载 - 默认（参数重置）
												table.reload('main_table', {
													where: {
														abc: '123456'
														//,test: '新的 test2'
														//,token: '新的 token2'
													}
													/*
													,cols: [ [ // 重置表头
													{type: 'checkbox', fixed: 'left'}
													,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
													,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
													,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
													,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
													,{field:'joinTime', title:'加入时间', width:120}
													] ]
													*/
												});
												break;
											case 'reload-deep':
												// 重载 - 深度（参数叠加）
												table.reload('main_table', {
													where: {
														abc: 123
														,test: '新的 test1'
													}
													//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
													//,cols: ins1.config.cols
												}, true);
												break;
											case 'reloadData':
												// 数据重载 - 参数重置
												table.reloadData('main_table', {
													where: {
														abc: '123456'
														//,test: '新的 test2'
														//,token: '新的 token2'
													}
													,scrollPos: 'fixed'// 保持滚动条位置不变 - v2.7.3 新增
													,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
													//,url: '404'
													//,page: {curr: 1, limit: 30} // 重新指向分页
												});
												break;
											case 'reloadData-deep':
												// 数据重载 - 参数叠加
												table.reloadData('main_table', {
													where: {
														abc: 123
														,test: '新的 test1'
													}
												}, true);
												break;
										}
										layer.msg('可观察 Network 请求参数的变化');
									}
								});
								
								// 更多测试
								dropdown.render({
									elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
									,data: [{
										id: 'add',
										title: '添加'
									},{
										id: 'update',
										title: '编辑'
									},{
										id: 'delete',
										title: '删除'
									}]
									//菜单被点击的事件
									,click: function(obj){
										var checkStatus = table.checkStatus(id)
										var data = checkStatus.data; // 获取选中的数据
										switch(obj.id){
											case 'add':
												layer.open({
													title: '添加',
													type: 1,
													area: ['80%','80%'],
													content: '<div style="padding: 16px;">自定义表单元素</div>'
												});
												break;
											case 'update':
												if(data.length !== 1) return layer.msg('请选择一行');
												layer.open({
													title: '编辑',
													type: 1,
													area: ['80%','80%'],
													content: '<div style="padding: 16px;">自定义表单元素</div>'
												});
												break;
											case 'delete':
												if(data.length === 0){
													return layer.msg('请选择一行');
												}
												layer.msg('delete event');
												break;
										}
									}
								});
								
							}
							,error: function(res, msg){
								console.log(res, msg)
							}
						});

						var indexSearchForm = 0;
						// 工具栏事件
						table.on('toolbar(main_table)', function(obj){
							var id = obj.config.id;
							var checkStatus = table.checkStatus(id);
							var othis = lay(this);
							switch(obj.event){
								[(${dto.toolbar.buttonScript})]
								case 'LAYTABLE_REFRESH':
								{
									layer.confirm("确定刷新吗？",{
										btn: ['确定', '取消']
									}, function (index) {
										location.reload();
										layer.close(index);
									});
									break;
								}
								case 'LAYTABLE_SEARCH':
								{
									if(indexSearchForm == 0) {

										indexSearchForm = layer.open({
											id: 'id_layer_open_search_form'
											,type: 1 //此处以iframe举例
											,title: '查询条件'
											,area: ['250px', '500px']
											,shade: 0
											,maxmin: false
											,closeBtn: false
											,offset: 'r'
											,content: $('#id_div_form_search').prop("innerHTML")
											,btn: [] //只是为了演示
											,yes: function(index, layero){
												layer.hide(index);
											}
											,btn2: function(){
												//layer.closeAll();
											}
											,zIndex: layer.zIndex //重点1
											,success: function(layero, index){
												layer.setTop(layero); //重点2. 保持选中窗口置顶
												
												//记录索引，以便按 esc 键关闭。事件见代码最末尾处。
												layer.escIndex = layer.escIndex || [];
												layer.escIndex.unshift(index);
												//选中当前层时，将当前层索引放置在首位
												layero.on('mousedown', function(){
													var _index = layer.escIndex.indexOf(index);
													if(_index !== -1){
														layer.escIndex.splice(_index, 1); //删除原有索引
													}
													layer.escIndex.unshift(index); //将索引插入到数组首位
												});
											}
											,end: function(){
												//更新索引
												if(typeof layer.escIndex === 'object'){
													layer.escIndex.splice(0, 1);
												}
											},
											cancel: function(index, layero){
												console.log('cancel---index---' + index);
												//layer.close(index);
												$('#layui-layer' + index).addClass('display-hide');
												return false; 
											}
										});
									} else {
										if($('#layui-layer' + indexSearchForm).hasClass('display-hide')) {
											$('#layui-layer' + indexSearchForm).removeClass('display-hide').addClass('display-show');
										} else {
											$('#layui-layer' + indexSearchForm).removeClass('display-show').addClass('display-hide');
										}
									}
									break;
								}
							};
						});
						 
						//触发单元格工具事件
						table.on('tool(main_table)', function(obj){ // 双击 toolDouble
							var data = obj.data;
							//console.log(obj)
							if(obj.event === 'del'){
								layer.confirm('真的删除行么', function(index){
									obj.del();
									layer.close(index);
								});
							} else if(obj.event === 'edit'){
								layer.open({
									title: '编辑',
									type: 1,
									area: ['80%','80%'],
									content: '<div style="padding: 16px;">自定义表单元素</div>'
								});
							}
							/*
							else if(obj.event === '_event_text_change_on_table'){
								$(this).on('change',function(e){
									var val = $(this).val();
									var name = $(this).attr('name');
									data[name] = val
									obj.update(data);//更新行对象数据
									layer.msg(val);
									console.log(obj + val);
								})
								return;
							}
							*/
						});
						
						//触发表格复选框选择
						table.on('checkbox(main_table)', function(obj){
							console.log(obj)
						});
						 
						//触发表格单选框选择
						table.on('radio(main_table)', function(obj){
							console.log(obj)
						});
						
						// 行单击事件
						table.on('row(main_table)', function(obj){
							//console.log(obj);
							//layer.closeAll('tips');
						});
						// 行双击事件
						table.on('rowDouble(main_table)', function(obj){
							console.log(obj);
						});
						 
						// 单元格编辑事件
						table.on('edit(main_table)', function(obj){
							console.log(obj);
							var field = obj.field //得到字段
							,value = obj.value //得到修改后的值
							,data = obj.data; //得到所在行所有键值
							
							var update = {};
							update[field] = value;
							obj.update(update);
							
							var dataCommit = {};
							dataCommit['guid'] = data.guid;
							dataCommit[field] = value;
							
							doEditOnTable(dataCommit);
						});
						
						//行单击事件（双击事件为：rowDouble）
						table.on('rowDouble(main_table)', function(obj){
							var data = obj.data;
							
							layer.alert(JSON.stringify(data), {
								title: '当前行数据：'
							});
							
							//标注选中样式
							obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
						});
					
						// 更新table的cache
						function modifyTableCacheBySwitch(data, value) {
						    var table = layui.table;
						    var switchElem = $(data.elem);
						    var tdElem = switchElem.closest('td');
						    var trElem = tdElem.closest('tr');
						    var tableView = trElem.closest('.layui-table-view');
						    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = value;
							
							var dataCommit = {};
							dataCommit['guid'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['guid'];
							dataCommit[tdElem.data('field')] = value;
							doEditOnTable(dataCommit);
						}
						
						//锁定操作
						form.on('checkbox(lockDemo)', function(obj){
							layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
						});
					
						// 搜索按钮
						form.on('submit(filter_form_search)', function(data){
							layui.table.reload("main_table",{
								page: {
									curr: 1
								},
								where: data.field
							})
							console.log(data.field);
							return false;
						});

						// 清空按钮
						form.on('submit(filter_form_search_clear)', function(data){
							layer.confirm("确定清空搜索条件吗？",{
								btn: ['确定', '取消']
							}, function (index) {
								$('form[name="searchForm"]').find('input[type=text],select').each(function() {
									$(this).val('');
								});
								layer.close(index);
							});
							return false;
						});
						
						//折叠面板点击事件
						element.on('collapse(test_collapse)', function(data){
							//layer.msg('展开状态：'+ data.show);
						});
					});
					
					// 折叠搜索条件
					function changeCollapse(dom) {
						if($(dom).find('.layui-colla-content').hasClass('layui-show') == false) {
							$(dom).find('.layui-colla-content').addClass('layui-show');
						} else {
							$(dom).find('.layui-colla-content').removeClass('layui-show');
						}
					}
					
					// 在表格上修改
					function doEditOnTable(dataCommit) {
						var indexOfLoading = layer.load(1, {
							shade: [0.5,'#000000'] //0.1透明度的白色背景
						});
						$.post('[(${dto.menu.pathGridEditRequest})]', dataCommit, function(res){
							if (res.code == 0) {
								layer.msg(res.msg);
								layer.close(indexOfLoading);
							} else {
								layer.close(indexOfLoading);
								layer.msg(res.msg);
							}
						});
					}
					
					// 
					$('body').on("mouseenter",".layui-table-body tr",function () {
					    $(this).siblings().find("div").css("color","#142A48");
					    $(this).find("div").css("color","#4DA1FF");
					})
					</script>
				</div>
			</div>
		</div>
		<!-- 左边面板【end】 -->
		
		<!-- 右边面板【start】 -->

		<!-- 搜索区域，用于弹出，默认不显示，外层需包裹DIV，内部用于获取html作为弹出层的content -->
		<div style="display:none;" id="id_div_form_search">
			<form class="layui-form" id="id_form_search" name="searchForm" style="background-color: #eeeeee; padding: 0.2rem;">
				<div class="layui-form-item">
					<input type="hidden" name="state" value="0">
					
					<div class="layui-inline" th:each="displayHtml : ${dto.query.displayHtmls}">
						<div class="layui-col-md12">
							[(${displayHtml})]
						</div>
					</div>
					<!-- <div class="layui-inline">
						<div class="layui-inline"><input type="checkbox" name="isCount" title="统计"></div>
					</div> -->
					<div class="layui-col-md12">
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm search_btn" lay-submit="" lay-filter="filter_form_search" style="margin-left: 35%;"><i class="layui-icon layui-icon-search"></i> 查询</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-danger layui-btn-sm clean_search_form_btn" lay-submit="" lay-filter="filter_form_search_clear" style="margin-left: 35%;"><i class="layui-icon layui-icon-close"></i> 清空</a>
						</div>
					</div>
				</div>
			</form>
		</div>
		
		
	</div>
	
	<script type="text/javascript">
	$(function() {
		console.log('浏览器的外部宽度window.outerWidth---' + window.outerWidth);
		console.log('浏览器的内部宽度window.innerWidth---' + window.innerWidth);
		console.log('浏览器的xx宽度---document.body.clientWidth---' + document.body.clientWidth);
		console.log('可视的宽度---document.body.scrollWidth---' + document.body.scrollWidth);
		console.log('浏览器的外部高度window.outerHeight---' + window.outerHeight);
		console.log('浏览器的内部高度window.innerHeight---' + window.innerHeight);
		console.log('浏览器的xx高度---document.body.clientHeight---' + document.body.clientHeight);
		console.log('可视的高度---document.body.scrollHeight---' + document.body.scrollHeight);
		$('#id_panel_left_grid').css('height', (window.innerHeight - 40) + 'px');
		
	});
	</script>
</body>
		
</html>